<template>
  <div>
    <!-- 考核单查询-详情页面 -->
    <BreakSpace label="结算单信息" :containerStyle="{ marginBottom: '10px' }" />
    <FormPanel ref="formPanel1" :list="formList" :cols="3" :formType="'add'" labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle" />
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="索赔单列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'items'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      :isPagination="false"
      :isSelectColumn="false"
      height="auto"
      :is-select-column="false"
    >
    </FilterTable>
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="考核单列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      :columns="columns1"
      :params="fetchParams"
      :dataSource="dataList1"
      :datakey="'items'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      :isPagination="false"
      :isSelectColumn="false"
      height="auto"
      :is-select-column="false"
    >
    </FilterTable>
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="审核列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      :columns="shenheliebiao"
      :params="fetchParams"
      :dataSource="dataList2"
      :datakey="'items'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      :isPagination="false"
      :isSelectColumn="false"
      height="auto"
      :is-select-column="false"
    >
    </FilterTable>
    <!--物流及开票信息 -->
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="物流及开票信息" :containerStyle="{ marginBottom: '10px' }" />
    <FormPanel ref="formPanel2" :list="formList2" :cols="2" :formType="'add'" labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle" />
    <div style="margin-bottom: 1rem"></div>
    <!--    <LazyLoadTab v-model="activeName" :tabMenus="menus"></LazyLoadTab>-->
    <div style="padding-top: 3rem"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right',
      }"
    >
      <multiuse-button type="primary" @click="closeDialog">关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
// // import res from '@/mock/tableData';

export default {
  data() {
    return {
      dataList: [],
      dataList1: [],
      dataList2: [],
      formList2: this.createFormList2(),
      huanxiajiandataList: [],
      fujiaxiangmudataList: [],
      visible: false,
      visibleDrawer: false,
      collapse: false,
      infoId: null,
      flterValue: {}, //参数
      columns: this.creatHeader(),
      columns1: this.creatHeader1(),
      shenheliebiao: this.shenheliebiao(),
      fetchParams: {}, //ipa 接口
      selectedRows: [], //选中服务站
      formList: this.createFormList(),
      saveData: null,
    };
  },
  created() {

  },
  methods: {
    formChangeHandle(val) {
      console.log(val);
      this.saveData = val;
    },
    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
      console.log(val);
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      console.log(this.selectedRows);
    },
    //保存
    saveDialog() {
      this.$refs.formPanel1.SUBMIT_FORM();
      if (this.saveData) {
        this.$emit('save', this.selectedRows);
      }
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    },
    add() {},
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '结算单号',
          fieldName: 'title1',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '服务站代码',
          fieldName: 'title2',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '服务站名称',
          fieldName: 'title3',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '结算单状态',
          fieldName: 'title4',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '提交时间',
          fieldName: 'title5',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '开票时间',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '发票号',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '税额',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '金额',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '开票金额',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '税率',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '发票张数',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '快递单号',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '索赔开始时间',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '附加费用',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '索赔单金额',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '考核单金额',
          fieldName: 'title6',
          readonly: true, // 只读
        },
        {
          type: 'TEXT_AREA',
          label: '开票备注',
          fieldName: 'number',
          placeholder: '请输入数量...',
        },
        {
          type: 'TEXT_AREA',
          label: '邮寄说明',
          fieldName: 'number',
          placeholder: '请输入数量...',
        },
        {
          type: 'TEXT_AREA',
          label: '审核结果',
          fieldName: 'number',
          placeholder: '请输入数量...',
        },
      ];
    },

    //索赔单列表
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        { title: '索赔单号', dataIndex: 'date1', sorter: true },
        { title: '维修工单号', dataIndex: 'date2', sorter: true },
        { title: 'VIN', dataIndex: 'date3', sorter: true },
        { title: '车型名称', dataIndex: 'date1', sorter: true },
        { title: '索赔类型', dataIndex: 'date2', sorter: true },
        { title: '索赔金额', dataIndex: 'date3', sorter: true },
        { title: '工时费', dataIndex: 'date1', sorter: true },
        { title: '配件费', dataIndex: 'date2', sorter: true },
        { title: '附加费用', dataIndex: 'date3', sorter: true },
        { title: '审核时间', dataIndex: 'date1', sorter: true },
        { title: '审核人', dataIndex: 'date2', sorter: true },
      ];
    },
    //考核单列表
    creatHeader1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        { title: '考核单号', dataIndex: 'date1', sorter: true },
        { title: '索赔单号', dataIndex: 'date2', sorter: true },
        { title: '考核类型', dataIndex: 'date3', sorter: true },
        { title: '考核金额', dataIndex: 'date1', sorter: true },
        { title: '已冲销金额', dataIndex: 'date2', sorter: true },
        { title: '待冲销金额', dataIndex: 'date3', sorter: true },
        { title: '考核原因', dataIndex: 'date1', sorter: true },
        { title: 'VIN', dataIndex: 'date2', sorter: true },
        { title: '考核日期', dataIndex: 'date3', sorter: true },
      ];
    },
    shenheliebiao() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        { title: '操作人', dataIndex: 'date1', sorter: true },
        { title: '操作时间', dataIndex: 'date2', sorter: true },
        { title: '操作后状态', dataIndex: 'date3', sorter: true },
        { title: '审核原因', dataIndex: 'date4', sorter: true },
      ];
    },
    createFormList2() {
      return [
        {
          type: 'INPUT',
          label: '厂家收票人',
          fieldName: 'title1',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '联系电话',
          fieldName: 'title2',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '收票地址',
          fieldName: 'title3',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '开票信息',
          fieldName: 'title4',
          readonly: true, // 只读
        },
        {
          type: 'INPUT',
          label: '其他提示',
          fieldName: 'title5',
          readonly: true, // 只读
        },
      ];
    },
  },
};
</script>
<style lang="less" scoped></style>
